<template>
	<view class="indexLayout pageBg">
		<my-nav-bar bgType="OrangeFrostedGlass"></my-nav-bar>
		<!-- <my-nav-bar bgType="transparent"></my-nav-bar> -->
		
		<view class="banner">
		  <swiper autoplay circular vertical easing-function="easeOutCubic" @change="onSwiperChange">
		    <swiper-item v-for="(item, index) in bannerImageList" :key="index">
		      <image :class="[currentItemId==index?'selected':'']" :src="item.imgUrl" mode="aspectFill"></image>
		    </swiper-item>
		  </swiper>
		</view>
	</view>
	
  <my-nav class="down-nav" :y="Number(0)" :x="XRef"></my-nav>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { BASE_URL, request } from "@/utils/request.js"
	import { getCurrentIdx } from "@/utils/page.js"
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app"
	
	console.log("windowinfo: "); console.log(uni.getWindowInfo());
	
	const currentItemId = ref();
	const onSwiperChange = (event) => {
	  currentItemId.value = event.detail.current;
	  // console.log(`当前滑块的 item-id: ${currentItemId.value}`);
	};

	const bannerList = ref([]);
	const bannerImageList = ref([]);

	const getBanner = async function(){
		let res = await request( {url: 'banner/all'} );
		// console.log(res);
		console.log(res.data);
		
		bannerList.value = res.data;
		
		bannerList.value.forEach( obj=>{
			console.log("id: " + obj.id );
			getBannerImage( obj.id );
		} )
		
		console.log("bannerImageList: ");
		console.log(bannerImageList.value);
	}

	const getBannerImage = async function(id) {
		let newObj = { imgUrl:  BASE_URL + `banner/image/${id}` };
		bannerImageList.value.push(newObj);
		
		// console.log("newobj: ");
		// console.log(newObj);
	}

	getBanner();
	
	// ---------------------------------------------
	const XRef = ref( Number(0) );
	
	onLoad((event) => {
		XRef.value = event.LastIdx ? Number(event.LastIdx) : 0;
	});
	
</script>


<style lang="scss">
	.banner{
		// border: 10px solid blue;
		width: 100vw;
		height: 94vh;
		swiper{
			// border: 10px solid orange;
			width: 100%;
			height: 100%;
			// margin: 20px;
			
			swiper-item{
				position: relative;
				width: 100%;
				height: 100%;
									
				image{
					border: 10px solid blue;
					width: 150%;
					height: 150%;
					border-radius: 10rpx;
					position: absolute; /* 绝对定位 */
					top: 50%; /* 垂直居中 */
					left: 50%; /* 水平居中 */
					transform: translate(-50%, -50%); /* 通过平移将中心对齐 */	
					transition: 1s;
				}
				
				image.selected{
					width: 100%;
					height: 100%;
					transition: 1s;
					// transform: scale(0.9); /* Adjust the scale as needed */
				}
			}
			
		}
	}
	
	.down-nav{
		position: fixed;
		bottom: 10px;
	}
</style>
